<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>搜索栏</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="../icon.css">
    <link rel="stylesheet" href="./searchbar.css">
</head>
<body>
<div class="page js_show" style="padding-top: 200px">
    <div class="page__bd">
        <!--<a href="javascript:;" class="btn btn_primary">点击展现searchBar</a>-->
        <div class="search-bar" id="searchBar">
            <form class="search-bar__form">
                <div class="search-bar__box">
                    <i class="icon-search"></i>
                    <input type="search" class="search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="icon-clear" id="searchClear"></a>
                </div>
                <label class="search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                    <i class="icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="cells searchbar-result" id="searchResult" style="display: none;">
            <div class="cell cell_access">
                <div class="cell__bd cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="cell cell_access">
                <div class="cell__bd cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="cell cell_access">
                <div class="cell__bd cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="cell cell_access">
                <div class="cell__bd cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../zepto.min.js"></script>
<script src="./searchbar.js"></script>
</body>
</html>